<#import "/spring.ftl" as s>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>渠道列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <#include '../include/baselink.ftl'>
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/css/jquery.pagination.css'/>">
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/plugins/daterange/daterangepicker.css'/>">
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/plugins/summernote/summernote.css'/>">
    <link rel="stylesheet" type="text/css" href="<@s.url '/assets/plugins/tagmanager/tagmanager.css'/>">
</head>
<body>
<div id="main">
<#include '../include/header.ftl'>
<#include '../include/sidebar.ftl'>

    <section id="content_wrapper">
        <section id="content" class="table-layout animated fadeIn">
            <div class="tray tray-center">
                <!-- dashboard tiles -->
                <div class="panel">
                    <div class="panel-heading">
                        <i class="fa fa-table"></i> 励销渠道
                    </div>
                    <div class="panel-body">
                        <div class="panel">
                            <div class="well well-sm mn">
                                <form class="form-inline">
                                    <#--<div class="form-group">-->
                                        <#--<div class="input-group input-group-sm">-->
                                            <#--<div class="input-group-addon btn btn-default">创建日期</div>-->
                                            <#--<input type="text" class="form-control input-sm w200"-->
                                                   <#--id="dateTimeRange">-->
                                            <#--<div class="input-group-addon btn btn-default">-->
                                                <#--<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>-->
                                            <#--</div>-->
                                        <#--</div>-->
                                    <#--</div>-->
                                    <div class="form-group">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-addon btn btn-default">渠道名称:</div>
                                            <input type="text" class="form-control input-sm" placeholder="请输入渠道名称"
                                                   v-model="searchInfo.companyName">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-addon btn btn-default">lxId:</div>
                                            <input type="text" class="form-control input-sm" placeholder="请输入励销客户id"
                                                   v-model="searchInfo.lxId">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-addon btn btn-default">商务经理:</div>
                                            <input type="text" class="form-control input-sm" placeholder="请输入商务经理姓名"
                                                   v-model="searchInfo.userName">
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-addon btn btn-default">渠道级别:</div>
                                            <select class="form-control input-sm" v-model="searchInfo.categoryMapped">
                                                <option value="">全部级别</option>
                                                <option value="A">A级渠道</option>
                                                <option value="B">B级渠道</option>
                                                <option value="C">C级渠道</option>
                                                <option value="D">D级渠道</option>
                                            </select>
                                        </div>
                                    </div>

                                    <div class="form-group">
                                        <div class="input-group input-group-sm">
                                            <div class="input-group-addon btn btn-default">获客方式:</div>
                                            <input type="text" class="form-control input-sm" placeholder="请输入获客方式"
                                                   v-model="searchInfo.industryMapped">
                                        </div>
                                    </div>

                                </form>
                            </div>
                        </div>
                        <div class="panel-body">
                            <table class="table table-bordered table-hover table-condensed">
                                <thead>
                                <tr>
                                    <th>lxId</th>
                                    <th>渠道名称</th>
                                    <th>商务经理</th>
                                    <th>公司名称</th>
                                    <th>渠道级别</th>
                                    <th>获客方式</th>
                                    <th>人员规模</th>
                                    <th>创建人</th>
                                    <th>创建时间</th>
                                </tr>
                                </thead>
                                <tbody>
                                <template>
                                    <tr v-for="lxChannel in lxChannels">
                                        <td>
                                            <a @click="detail(lxChannel.lxId)">{{lxChannel.lxId}}</a>
                                        </td>
                                        <td>
                                            <a @click="detail(lxChannel.lxId)">{{lxChannel.name}}</a>
                                        </td>
                                        <td>{{lxChannel.userName}}</td>
                                        <td>{{lxChannel.companyName}}</td>
                                        <td>{{lxChannel.categoryMapped}}</td>
                                        <td>{{lxChannel.industryMapped}}</td>
                                        <td>{{lxChannel.sourceMapped}}</td>
                                        <td>{{lxChannel.staffSizeMapped}}</td>
                                        <td>{{lxChannel.creatorName}}</td>
                                        <td>{{lxChannel.createdAt}}</td>
                                    </tr>
                                    <tr>
                                        <td colspan="10" v-if="lxChannels.length == 0" class="text-center">
                                            暂无数据!
                                        </td>
                                    </tr>
                                </template>
                                </tbody>
                                <tfoot>
                                <tr>
                                    <td colspan="10">
                                        <div class="table-responsive">
                                            <div id="pageMenu"></div>
                                        </div>
                                    </td>
                                </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </section>
</div>
</body>
<#include '../include/footer_js.ftl'/>
<script src="<@s.url '/assets/js/jquery.pagination.min.js'/>"></script>
<script src="<@s.url '/assets/plugins/daterange/moment.js'/>"></script>
<script src="<@s.url '/assets/plugins/bs-confirmation/bootstrap-confirmation.js'/>"></script>
<script src="<@s.url '/assets/plugins/daterange/daterangepicker.js'/>"></script>
<script>
    var app = new Vue({
        el: '#main',
        data: {
            lxChannels: [],
            searchInfo: {
                lxId: '',
                userName: '',
                industryMapped: '',
                companyName: '',
                categoryMapped: '',
                page: 1,
                pageSize: 15,
                startDate: moment().startOf('year'),
                endDate: moment().add(1, 'days').format('YYYY-MM-DD')
            }
        },
        created: function () {
            this.searchInfo.page = 1;
            this.queryAllLxChannels();
        },
        mounted: function () {
            this.init();
        },
        watch: {
            "searchInfo.page": function () {
                this.queryAllLxChannels();
            },
            "searchInfo.companyName": function () {
                this.search();
            },
            "searchInfo.categoryMapped": function () {
                this.search();
            },
            "searchInfo.userName": function () {
                this.search();
            },
            "searchInfo.industryMapped": function () {
                this.search();
            },
            "searchInfo.lxId": function () {
                this.search();
            },
            // 'searchInfo.startDate': function () {
            //     this.search();
            // }
        },
        methods: {
            search: function () {
                this.searchInfo.page = 1;
                $('#pageMenu').page('destroy');//销毁分页
                this.queryAllLxChannels();
            },
            queryAllLxChannels: function () {
                var url = contentPath + '/lxChannel/findAllLxChannelByPage';
                this.$http.post(url, this.searchInfo).then(function (response) {
                    this.lxChannels = response.data.data.list;
                    var temp = this;
                    $("#pageMenu").page({
                        total: response.data.data.total,
                        pageSize: response.data.data.pageSize,
                        firstBtnText: '首页',
                        lastBtnText: '尾页',
                        prevBtnText: '上一页',
                        nextBtnText: '下一页',
                        showInfo: true,
                        showJump: true,
                        jumpBtnText: '跳转',
                        infoFormat: '{start} ~ {end}条，共{total}条'
                    }, response.data.data.page).on("pageClicked", function (event, pageIndex) {
                        temp.searchInfo.page = pageIndex + 1;
                    }).on('jumpClicked', function (event, pageIndex) {
                        temp.searchInfo.page = pageIndex + 1;
                    });
                }, function (error) {
                    swal(error.body.msg);
                });
            },
            init: function () {
                var yearStart = moment().startOf('year');
                var start = moment().subtract(1, "months");
                var end = moment();
                $("#dateTimeRange").daterangepicker({
                    applyClass: 'btn-sm btn-success',
                    cancelClass: 'btn-sm btn-default',
                    opens: 'right',
                    separator: ' - ',
                    showWeekNumbers: true,
                    //dateFormat: 'yyyy-mm-dd',
                    //format: 'YYYY-MM-DD',
                    startDate: yearStart,
                    endDate: end,
                    ranges: {
                        '今年': [yearStart, end],
                        // '今日': [moment().startOf('day'), moment()],
                        // '昨日': [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                        // '最近7日': [moment().subtract(6, 'days'), moment()],
                        '最近30日': [start, end],
                        '本月': [moment().startOf("month"), moment().endOf("month")],
                        '上个月': [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
                    },
                    locale: {
                        format: 'YYYY-MM-DD',
                        applyLabel: '确认',
                        cancelLabel: '取消',
                        fromLabel: '起始时间',
                        toLabel: '结束时间',
                        customRangeLabel: '自定义',
                        daysOfWeek: "日,一,二,三,四,五,六".split(","),
                        monthNames: "一月,二月,三月,四月,五月,六月,七月,八月,九月,十月,十一,十二月".split(","),
                        firstDay: 1
                    }
                }, function (start, end, label) {
                    app.searchInfo.startDate = start.format('YYYY-MM-DD');
                    app.searchInfo.endDate = end.format('YYYY-MM-DD');
                });
            },
            detail: function (lxId) {
                window.location.href = "../channel/detail?lxId=" + lxId;
            }
        }
    });
</script>
</body>
</html>